<!-- 开通会员页面 -->
<template>
    <view class="my-wallet-box">
        <van-nav-bar title="会员中心" color="#fff" right-text="在线客服" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight">
            <template #left>
                <van-icon name="arrow-left" color="#fff" />
            </template>
            <template #title>
                <view style="color:#fff">会员中心</view>
            </template>
            <template #right>
                <view style="color:#fff" @click="customerService">在线客服</view>
            </template>
        </van-nav-bar>
        <view class="member-top">
            <view class="member-top-main">
                <img src="@/assets/image/member/09.png" v-if="state.isMember" />
                <img src="@/assets/image/member/14.png" v-else />
                <text class="member-top-main-tips" v-if="state.isMember">开通会员，尊享更多权益</text>
                <text class="member-top-main-tips" v-else>会员期限:{{state.memberEndTimer}}</text>
                <view class="member-top-main-head">
                    <van-image round width="48rpx" height="48rpx" fit="cover"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                    <text v-if="state.isMember">暂未 开通VIP特权</text>
                    <text v-else>已开通VIP特权</text>
                </view>
            </view>
        </view>
        <view class="member-main-bottom">
            <view class="member-main-bottom-head">
                <view class="member-main-price-list">
                    <view class="member-main-price-item" :class="index == state.curIndex ? 'member-main-price-item-cur' : ''"
                        @click="memberCur(item,index)" v-for="(item, index) in state.VipPricesList.VipPrices" :key="item.Id">
                        <view class="price-duration">{{ item.ShowName }}</view>
                        <view class="price-total">{{ item.Price }}</view>
                        <view class="price-init">原价￥{{ item.ShowPrice }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="member-submit" @click="state.show = true">
            {{state.isMember ? '开通会员' : '续费会员' }}
        </view>
        <view class="member-tips">
            <img src="@/assets/image/member/12.png" alt="">
        </view>
        <view class="member-tips-list" >
            <view class="member-tips-item" v-for="itemChild in state.memberType" :key="itemChild.VipTypeId">
                <img :src="itemChild.Ico" alt="">
                <view class="member-tips-item-title">{{ itemChild.ShowName }}</view>
            </view>
        </view>
        <view class="member-tips-bottom">
            <view class="member-tips-bottom-title">温馨提示</view>
            <view class="member-tips-bottom-content">
                1.您开通成功即代表同意《用户使用协议》相关规定；<br />2.如支付遇到问题，请及时联系在线客服；
            </view>
            <SubmitOrder v-if="state.show" :isShow="state.show" @update:show="(ev) => state.show = ev" :amount="state.curMember" orderDesc="开通VIP会员" payPage="会员中心"></SubmitOrder>
        </view>
    </view>
</template>

<script setup>
import { reactive, onMounted, getCurrentInstance } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

import {
    VipPricesList,
    vipAuth, // vip权限列表
    LookUserExpand, // 查看会员详情
    UserInfo, // 获取会员信息
} from '@/api/person/index.js'

import SubmitOrder from "@/pages/home/components/payOrder/payOrderPup.vue"

let { proxy } = getCurrentInstance()

const state = reactive({
    minimized: false,
    isMember: false,
    show: false,
    memberType: [],
    VipPricesList: {},
    curIndex: 0,
    vipAuthList:[],
    curMember:{},
    memberEndTimer:""
})

// 查看会员开通详情
const LookUserExpandFn = async () => {
    let data = await proxy.$get(LookUserExpand)
    state.memberEndTimer= data.data.find(o => o.ItemName == 'VIP_ETIME').Value
}

// 获取开通会员列表数据
const getMemberList = async () => {
    let data = await proxy.$get(VipPricesList)
    if (data.code == 200) {
        state.VipPricesList = data.data
        state.curMember = state.VipPricesList.VipPrices[0]
    }
}

// 选中会员项目
const memberCur = (item, index) => {
    state.curIndex = index
    state.curMember = item
}

// vip权限列表
const getVipAuthList = async () => {
    let sex = JSON.parse(getAuthorization('userInfo'))
    let data = await proxy.$get(vipAuth + '/1')
    if (data.code == 200) {
        data.data.forEach( o => {
            state.memberType = state.memberType.concat(o.VipPowers)
        })
    }
}

// 在线客服
const customerService = () => {
    uni.navigateTo({
        url:'/pages/privateChat/index?userIMId=' + 215
    })
}

onLoad((options) => {

})

// 获取会员信息
const UserInfoFn = async () => {
    let data = await proxy.$get(UserInfo+getAuthorization('userId'))
    state.isMember = data.data.VipState == 0 ? true : false
    setAuthorization("userInfo",JSON.stringify(data.data))
}

onMounted(() => {
    getMemberList()
    getVipAuthList()
    UserInfoFn()
    if(!state.isMember){
        LookUserExpandFn()
    }
})

const onClickLeft = () => {
    history.back();
}
const onClickRight = () => {
    showToast('按钮');
}

</script>

<style lang="scss" scoped>
.van-nav-bar,
.member-top {
    background: #000;
}

.member-top-main {
    padding: 30rpx;
    position: relative;
    padding-bottom: 60rpx;

    img {
        display: block;
        width: 100%;
    }

    .member-top-main-tips {
        position: absolute;
        top: 190rpx;
        left: 60rpx;
        color: #967B56;
        font-size: 20rpx;
    }

    .member-top-main-head {
        position: absolute;
        left: 60rpx;
        top: 260rpx;
        display: flex;
        align-items: center;

        .van-image {
            margin-right: 20rpx;
        }

        text {
            color: #FFCE95;
            font-size: 28rpx;
        }
    }
}

.member-main-bottom-head {
    overflow-x: auto;
}

.member-main-bottom {
    position: relative;
    background: #fff;
    z-index: 22;
    border-radius: 16rpx 16rpx 0 0;
    top: -16rpx;

    .member-main-price-list {
        display: flex;
        width: max-content;
        padding: 30rpx;
    }

    .member-main-price-item {
        flex: none;
        border-radius: 12px 12px 12px 12px;
        opacity: 1;
        border: 4rpx solid #ccc;
        padding: 40rpx;
        text-align: center;
        margin-right: 30rpx;

        .price-duration {
            font-size: 32rpx;
            font-weight: bold;
            color: #262626;
        }

        .price-total {
            font-size: 60rpx;
            font-weight: bold;
            color: #A97D64;
            margin: 30rpx 0 20rpx 0;

            &::before {
                content: "￥";
                font-size: 36rpx;
            }
        }

        .price-init {
            font-size: 24rpx;
            font-weight: 500;
            color: #9F9F9F;
            text-decoration: line-through;
        }
    }

    .member-main-price-item-cur {
        border-color: #A97D64 !important;
    }

    .member-main-price-item:nth-child(1) {
        position: relative;

        &::before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            content: "推荐";
            transform: translateY(-50%);
            font-size: 20rpx;
            width: 88rpx;
            height: 32rpx;
            background: url("@/assets/image/member/11.png") 100% no-repeat;
            background-size: 100%;
            font-weight: bold;
            color: #FFCE95;
        }
    }
}


.member-submit {
    height: 100rpx;
    background: url("@/assets/image/member/10.png") 100% no-repeat;
    background-size: 100%;
    margin: 40rpx 30rpx 40rpx 30rpx;
    text-align: center;
    font-size: 40rpx;
    color: #683207;
    font-weight: bold;
    line-height: 100rpx;
}

.member-tips {
    display: flex;
    justify-content: center;

    img {
        height: 44rpx;
    }
}

.member-tips-list {
    display: flex;
    flex-wrap: wrap;

    .member-tips-item {
        width: 25%;
        margin-top: 40rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: bold;
        color: #CC8C5A;

        img {
            width: 60rpx;
        }

    }
}

.member-tips-bottom {
    font-size: 24rpx;
    padding: 30rpx;
    line-height: 1.8;

    .member-tips-bottom-title {
        color: #262626;
        font-weight: bold;
    }

    .member-tips-bottom-content {
        color: #666;
    }
}
:deep(.van-hairline--bottom:after){
 border: none!important;   
}
</style>
